<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>分类修改</title>
    <link type="text/css" rel="stylesheet" href="css/tableAndPage.css"/>
</head>
<body>
<h1>分类修改</h1>
<div id="app">
    分类名:<input type="text" v-model="name"/><br/>
    <span v-if="typeDate.type!=1">所属分类</span>
    <select v-if="typeDate.type!=1" v-model="parentId" >
        <option v-for="item in showTypeDate" v-bind:value="item.id">{{item.name}}</option>
    </select>


    <br/><br/>
    <button @click="update()">确认修改</button>
    &nbsp;&nbsp;
    <button @click="qx()">取消修改</button>
</div>
</body>
</html>
<!-- serialNumber -->
<script src="js/axios.js"></script>
<script src="js/md5.js"></script>
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            id: decodeURI(window.location.href).split("=")[1],
            typeId:'',
            typeDate:'',
            showTypeDate:'',
            parentId:'',
            name:'',
        },

        methods: {
            md5Public: async function (objectStr) {
                let randomNum = 0;
                //接口拿随机数
                await axios({
                    url: "http://localhost:8080/setRedisNum",
                    methods: "get"
                }).then(res => {
                    // alert("随机数开始");
                    console.log("随机数:" + res.data);
                    randomNum = res.data;

                })
                //放到header里的参数 时间戳 随机数 加密的字符串
                //时间戳
                var dateStr = new Date();
                dateStr = Date.now();

                //把obj按照key值升序
                let sortObject = function (obj) {
                    let sorter = function (a, b) {
                        return obj[a] - obj[b];
                    }
                    let keys = Object.keys(obj);
                    keys.sort(sorter);
                    let res = {};
                    keys.forEach(key => {
                        res[key] = obj[key];
                    });
                    return res;
                }
                //升序的对象
                var sxStr = sortObject(objectStr);
                //把升序的对象转成字符串
                var jsonStr = "";
                for (let obj in objectStr) {
                    jsonStr += obj + "=" + objectStr[obj] + "&";
                }
                //把最后一个&符号切割了
                jsonStr = jsonStr.substr(0, jsonStr.length - 1);

                //加密字符串
                var str = MD5(jsonStr + randomNum);
                console.log("jsonStr:" + jsonStr);
                console.log("randomNum:" + randomNum);
                // alert("str:"+str);
                await axios({
                    url: "http://localhost:8080/returnInterfaceStr",
                    methods: "POST",
                    params: objectStr,
                    headers: {
                        "TimeStamp": dateStr,
                        "randomNum": randomNum,
                        "encryptionStr": str
                    }
                }).then(res => {
                    console.log(res);
                    console.log("后端接受之:" + res.data);
                    if (res.data == true) {
                        return true;
                    } else {
                        return false;
                    }
                })
                return true;
            },
            showTypeById:async function(id){
                var that = this;
                // alert(id)
                let flag = await this.md5Public({"a1":54,"a2":55,"a3":56});
                if( flag == true ){
                    await axios({
                        method:"post",
                        url:"http://localhost:8080/getTypeById",
                        headers: {'content-type':'application/x-www-form-urlencoded'},
                        data: {
                            id:id,
                        }

                    }).then(function (response) {
                        console.log(response.data.data)
                        that.typeDate=response.data.data;
                        that.typeId=response.data.data.type;
                        that.parentId=response.data.data.parentId;
                        that.name=response.data.data.name;
                        alert(that.typeId)
                        that.showType(that.typeId)

                    })
                }

            },
            showType: async function(type){
                var that = this;
                // alert(id)
                let flag = await this.md5Public({"a1":54,"a2":55,"a3":56});
                if( flag == true ){
                    if(type!=1){
                        type=type-1;
                    }
                    await axios({
                        method:"post",
                        url:"http://localhost:8080/getProductTypes",
                        headers: {'content-type':'application/x-www-form-urlencoded'},
                        data: {
                            typeId:type,
                        }

                    }).then(function (response) {
                        console.log(response.data.data)
                        that.showTypeDate=response.data.data;


                    })
                }
            },
            update:async function(){
                var that = this;
                alert(that.name)
                let flag = await this.md5Public({"a1":54,"a2":55,"a3":56});
                if( flag == true ){
                    await axios({
                        method:"post",
                        url:"http://localhost:8080/modifyType",
                        headers: {'content-type':'application/x-www-form-urlencoded'},
                        data: {
                            parentId:that.parentId,
                            name:that.name,
                            id:that.id,
                        }

                    }).then(function (response) {
                        console.log(response.data.data);
                        alert("修改成功！")
                        window.location.href="typeList.html";

                    })
                }
                },
            qx:async function(){
                window.location.href="typeList.html";
            }


        },

        created(){
            this.showTypeById(this.id);


        }

    })


</script>
